<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-6 flex v-align-c">
      <span></span>
      <i>音频</i>
    </h2>
    <div class="pancel-conmain">
      <h3 class="pancel-s-title">音频设置</h3>
      <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
        <div class="border-box near-box">
          <h4>音频样式</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="playMode" label="0">音乐播放模式</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box near-box">
          <h4>上传音频</h4>
          <div>
            <el-form-item>
              <div class="mar-t-2 mar-b-15 video-upload-btn">
                <el-upload class="avatar-uploader"
                action="/api/common/uploadFiles"
                accept="image/mp3"
                list-type="picture-card-s"
                :before-upload="beforeUpload" name="files"
                v-loading="fileLoading"
                :data="token" :show-file-list="false" :on-success="handleUploadSuccess">
                  <span v-if="details.audio.title" class="font-14 font-blue">{{ details.audio.title }}</span>
                  <div v-else class="default-v-upload">
                    <i class="el-icon-plus"></i>
                  </div>
                </el-upload>
              </div>
            </el-form-item>
          </div>
        </div>      
        <div class="border-box">
          <h4>音频名称</h4>
          <div class="mar-t-1 mar-b--15">
            <el-form-item>
              <div>
                <el-input placeholder="请输入标题文字" class="mini-s-input" v-model="details.audio.title"/>
              </div>
            </el-form-item>
          </div>
          <h4>音频作者</h4>
          <div class="mar-t-1 mar-b--3">
            <el-form-item>
              <div>
                <el-input placeholder="请输入副标题" class="mini-s-input" v-model="details.audio.subtitle"/>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="mar-l--25 mar-t--28 pad-b-15">
          <h3 class="pancel-s-title">播放设置</h3>
        </div>
        <div class="border-box near-box">
          <h4>循环播放</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.audio.loopPlayback" label="0">关闭</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.audio.loopPlayback" label="1">开启</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="border-box">
          <h4>自动播放</h4>
          <div class="mar-t--5 mar-b--15">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.audio.autoPlayback" label="0">关闭</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.audio.autoPlayback" label="1">开启</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style lang="less" scoped>

</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'

  export default {
    components: {},
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        title: '',
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: [],
          pictureList: [],
          buttonGroupList: [],
          title: {
            detailsId: '',
            titleId: '',
            backColor: '',
            textColor: '',
            textAlign: 'text-align-c',
            textSize: 16,
            title: '',
            textLink: ''
          },
          video: {
            videoId: '',
            detailsId: '',
            videoStyle: '1',
            videoImg: '',
            videoName: '',
            videoUrl: ''
          },
          audio: {
            audioId: '',
            detailsId: '',
            title: '',
            subtitle: '',
            loopPlayback: '0',
            autoPlayback: '0',
            autoDuration: ''
          },
          text: {
            textId: '',
            detailsId: '',
            content: '',
            textSize: '',
            textShape: '',
            textAlign: '',
            textColor: ''
          }
        },
        playMode: '0',
        fileLoading: false
      }
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.details = this.details1
      this.details.audio.loopPlayback = this.details1.audio.loopPlayback.toString()
      this.details.audio.autoPlayback = this.details1.audio.autoPlayback.toString()
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsAudio', function(details) {
        that.details = details
        that.details.audio.loopPlayback = details.audio.loopPlayback.toString()
        that.details.audio.autoPlayback = details.audio.autoPlayback.toString()
      })
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        console.log(file)
      },
      beforeUpload(file) {
        // const isWMA = file.type === 'audio/wma'
        // const isWAV = file.type === 'audio/wav'
        const isMP3 = file.type === 'audio/mp3' || file.type === 'audio/mpeg'
        if (!isMP3) {
          this.$message.error('上传音频必须是MP3 格式!')
          this.fileLoading = false
          return
        }
        this.fileLoading = true
        return (isMP3)
      },
      handleUploadSuccess(res, file) {
        if (this.fileLoading) {
          if (res.code === 101) {
            this.fileLoading = false
            this.details.audio.audioUrl = res.data[0]
            this.title = file.name
            if (!this.details.audio.title) {
              this.details.audio.title = file.name.substr(0, 11)
            }
            this.$bus.$emit('audioFormData', this.details)
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
            return false
          }
        }
      },
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: [],
          pictureList: [],
          buttonGroupList: [],
          title: {
            detailsId: '',
            titleId: '',
            backColor: '',
            textColor: '',
            textAlign: 'text-align-c',
            textSize: 16,
            title: '',
            textLink: ''
          },
          video: {
            videoId: '',
            detailsId: '',
            videoStyle: '1',
            videoImg: '',
            videoName: '',
            videoUrl: ''
          },
          audio: {
            audioId: '',
            detailsId: '',
            title: '',
            subtitle: '',
            audioUrl: '',
            loopPlayback: '0',
            autoPlayback: '0',
            autoDuration: ''
          },
          text: {
            textId: '',
            detailsId: '',
            content: '',
            textSize: '',
            textShape: '',
            textAlign: '',
            textColor: ''
          }
        }
      }
    }
  }
</script>
